<template>
  <view class="message_view">
    <view class="show_view">
      <view class="show_left_view">
        <view class="show_top_view">开通订阅消息功能</view>
        <view class="show_down_view">向你发送小程序订阅消息</view>
      </view>
      <view class="show_right_view">
        <switch class="switch-checked" disabled="true" :checked="is_open" />
      </view>
    </view>
    <view class="explain_view">
      <view class="explain_title">订阅消息说明</view>
      <view class="explain_con">当订阅次数为0时，无法接受到对应的消息</view>
      <view class="explain_con">当订阅次数小于5时，以红色提醒</view>
    </view>
    <view class="action_view" v-if="subscribe_message_list.length>0">
      <view class="action_item" v-for="(item,index) in subscribe_message_list">
        <view class="action_left_item">
          <view class="action_top_view">{{item.title}}</view>
        </view>
        <block>
          <view class="action_right_item" @tap="subscribe_msg_add(item.id,item.templateId)">
            <view class="action_btn">订阅 +1</view>
          </view>
        </block>
      </view>
    </view>
    <view class="set_view" @tap="setting_subscribe_msg">
      <view class="set_left_view">
        <view class="set_top_view">微信授权设置</view>
        <view class="set_down_view">拒绝订阅消息后重新授权</view>
      </view>
      <view class="set_right_view">
        <icon class="iconfont icon_more"></icon>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    listMessage
  } from "@/api/system/message/message.js"
  export default {
    data() {
      return {
        is_open: false, //是否开启消息订阅
        subscribe_message_list: [], //订阅消息数组
         queryParams: {
          pageNum: 1,
          pageSize: 10,
          title: null,
          templateId: null,
         },
      }
    },
    onLoad(option) {
      this.getSubsription()
      this.getlistMessage()
    },
    methods: {
      //获取订阅消息是否开启
      getSubsription() {
        const thant = this
        uni.getSetting({
          withSubscriptions: true,
          success(res) {
            thant.is_open = res.subscriptionsSetting.mainSwitch
          }
        })
      },
      //获取用户订阅消息的列表
      getlistMessage() {
        listMessage(this.queryParams).then(response => {
          this.subscribe_message_list = response.rows
        })
      },
      //跳转到设置页面
      setting_subscribe_msg() {
        const thant = this
        uni.openSetting({
          success(res) {
            if (res.errMsg = 'openSetting:ok') {
              thant.getSubsription()
            }
          }
        })
      },
      //点击订阅消息+1
      subscribe_msg_add(id, tmplId) {
        const thant = this
        if (this.is_open == true) {
          uni.requestSubscribeMessage({
            tmplIds: [tmplId],
            success: (res) => {
              if (res[tmplId] == 'accept') {
                thant.getlistMessage()
                thant.$modal.msgSuccess("订阅成功！")
              }
            },
            fail(err) {
              thant.$modal.msgError(err)
            }
          })
        } else {
          uni.showModal({
            title: '提示',
            content: '您已关闭消息订阅，请开启后再进行操作',
            showCancel: false,
          });
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #f8f8f8;
  }

  .copyright {
    margin-top: 50rpx;
    text-align: center;
    line-height: 60rpx;
    color: #999;
  }

  .header-section {
    display: flex;
    padding: 30rpx 0 0;
    flex-direction: column;
    align-items: center;
  }

  .message_view {
    margin-left: 3%;
    margin-right: 3%;
  }

  .show_view {
    margin-top: 50rpx;
    display: flex;
    width: 100%;
    align-items: center;
  }

  .show_left_view {
    width: 70%;
    display: flex;
    flex-direction: column;
  }

  .show_top_view {
    color: #444444;
    font-size: 28rpx;
  }

  .show_down_view {
    color: #949494;
    font-size: 24rpx;
  }

  .show_right_view {
    display: flex;
    width: 30%;
    justify-content: flex-end;
  }

  .explain_view {
    margin-top: 60rpx;
  }

  .explain_title {
    color: #444444;
    font-size: 28rpx;
    line-height: 35rpx;
  }

  .explain_con {
    color: #949494;
    font-size: 24rpx;
  }

  .action_view {
    margin-top: 80rpx;
  }

  .action_item {
    margin-top: 25rpx;
    padding-bottom: 25rpx;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: dashed 1rpx #d6d5d5;
  }

  .action_left_item {
    width: 80%;
    display: flex;
    flex-direction: column;
  }

  .action_top_view {
    color: #444444;
    font-size: 28rpx;
  }

  .action_down_view {
    color: #949494;
    font-size: 22rpx;
    margin-top: 5rpx;
  }

  .action_down_less_view {
    color: #db1f1f;
  }

  .action_right_item {
    width: 20%;
    display: flex;
    justify-content: flex-end;
  }

  .action_btn {
    color: #ffffff;
    font-size: 24rpx;
    width: 120rpx;
    height: 55rpx;
    line-height: 55rpx;
    border-radius: 8rpx;
    text-align: center;
    background-color: #1dbc20;
  }

  .action_invalid_btn {
    background-color: #f58c8c;
  }

  .set_view {
    margin-top: 90rpx;
    display: flex;
    width: 100%;
  }

  .set_left_view {
    width: 90%;
  }

  .set_top_view {
    color: #444444;
    font-size: 28rpx;
  }

  .set_down_view {
    color: #949494;
    font-size: 22rpx;
  }

  .set_right_view {
    width: 10%;
    display: flex;
    justify-content: flex-end;
  }

  .icon_more {
    color: #b9b8b8;
    font-size: 30rpx;
  }

  .icon_more::after {
    content: '\e606';
  }
</style>